<template>
	<notice :notice.sync="notice"></notice>
	<header-home></header-home>
	<div class="container">
		<div class="loading" v-if="loading">
    		<i class="fa fa-spinner fa-spin fa-3x"></i>
    	</div>
    	<div class="row">
            <div class="col-md-offset-2 col-md-8 margin-bottom-10">
                <nav class="nav nav-pills">
                    <li :class="{active: state=='info'}"><a href="javascript:;" @click="state='info'">基本资料</a></li>
                    <li :class="{active: state=='psw'}"><a href="javascript:;" @click="state='psw'">密码管理</a></li>
                </nav>
            </div>
        </div>
        <template v-if="!loading">
    		<div class="row" v-if="state=='info'"> 
    	        <div class="col-md-offset-2 col-md-8">
    	            <div class="panel panel-default">
    	                <div class="panel-body">
    	                	<validator name="edit">
    	                	<form class="form-horizontal">
    	                		<div class="form-group">
    	                			<label class="col-sm-2 control-label">邮箱</label>
    	                			<div class="col-sm-10">
    	                				<p class="form-control-static">{{info.email}}</p>
    	                			</div>
    	                		</div>
    	                		<div class="form-group">
    	                			<label for="name" class="col-sm-2 control-label">姓名</label>
    	                			<div class="col-sm-4">
    	                				<input type="text" class="form-control" id="name" placeholder="请输入姓名"
    	                					v-model="info.name"
    	                                    v-validate:name="{
    											required: {rule: true, message: '请输入姓名'}
    				    	        		}">
    	                			</div>
    	                		</div>
    	                		<div class="form-group">
    	                			<label class="col-sm-2 control-label">性别</label>
    	                			<div class="col-sm-8 radio-row">
    	                				<label class="radio-inline">
    	                				  	<input type="radio" value="男" name="sex" v-model="info.sex">男性
    	                				</label>
    	                				<label class="radio-inline">
    	                				  	<input type="radio" value="女" name="sex" v-model="info.sex">女性
    	                				</label>
    	                			</div>
    	                		</div>
    	                		<div class="form-group">
    	                			<label class="col-sm-2 control-label">机构</label>
    	                			<div class="col-sm-10">
    	                				<p class="form-control-static">{{info.col_name}}</p>
    	                			</div>
    	                		</div>
    	                		<div class="form-group">
    	                			<label class="col-sm-2 control-label">身份</label>
    	                			<div class="col-sm-10">
    	                				<p class="form-control-static">{{info.state}}</p>
    	                			</div>
    	                		</div>
    	                		<div class="form-group">
    	                			<label class="col-sm-2 control-label">{{user.isTeacher?'教工号':'学号'}}</label>
    	                			<div class="col-sm-10">
    	                				<p class="form-control-static">{{info.number}}</p>
    	                			</div>
    	                		</div>
    	                		<div class="form-group">
    	                			<div class="col-sm-10 col-sm-offset-2">
    	                				<button class="btn btn-primary" @click="edit">修改</button>
    	                			</div>
    	                		</div>
    	                	</form>
    	                	</validator>
    	                </div>
    	            </div>
    	        </div>
    	    </div>
    	    <div class="row" v-if="state=='psw'"> 
		        <div class="col-md-offset-2 col-md-8">
		            <div class="panel panel-default">
		                <div class="panel-body">
		                	<validator name="changePwd">
		                	<form class="form-horizontal">
		                		<div class="form-group">
		                			<label for="name" class="col-sm-2 control-label">旧密码</label>
		                			<div class="col-sm-4">
		                				<input type="password" class="form-control" id="name" placeholder="请输入旧密码" v-model="oldPwd"
		                                    v-validate:old-pwd="{
												required: {rule: true, message: '请输入旧密码'}
					    	        		}">
		                			</div>
		                		</div>
		                		<div class="form-group">
		                			<label for="name" class="col-sm-2 control-label">新密码</label>
		                			<div class="col-sm-4">
		                				<input type="password" class="form-control" id="name" placeholder="请输入新密码" v-model="newPwd"
		                                    v-validate:new-Pwd="{
												required: {rule: true, message: '请输入新密码'}
					    	        		}">
		                			</div>
		                		</div><div class="form-group">
		                			<label for="name" class="col-sm-2 control-label">确定新密码</label>
		                			<div class="col-sm-4">
		                				<input type="password" class="form-control" id="name" placeholder="请再次输入密码" v-model="newPwdComfirm"
		                                    v-validate:new-pwd-Comfirm="{
												required: {rule: true, message: '请再次输入密码'},
												 confirm: {rule: newPwd, message: '两次输入的密码不一致'}
					    	        		}">
		                			</div>
		                		</div>
		                		<div class="form-group">
		                			<div class="col-sm-10 col-sm-offset-2">
		                				<button class="btn btn-primary" @click="change">修改</button>
		                			</div>
		                		</div>
		                	</form>
		                	</validator>
		                </div>
		            </div>
		        </div>
		    </div>
        </template>
    </div>
</template>

<script>
	import HeaderHome from '../../Component/HeaderHome/HeaderHome';
	import Notice from '../../Component/Notice/Notice';
	import auth from '../../Component/Auth/auth';

	export default {
		created () {
			this.getInfo();
		},
		data() {
			return {
				user: {},
				state: 'info',
				notice: {type: 0, msg: ""},
				info: {},
				loading: false,
				oldPwd: "",
				newPwd: "",
				newPwdComfirm: ""
			}
		},
		components: {
			HeaderHome,
			Notice
		},
		methods: {
			getInfo: function () {
				this.loading = true;
				this.user = auth.getInfo();
				this.$http.get('/index/getLoginInfo').then(function(resp) {
		            if (resp.data.status === 1) {
		            	var info = resp.data.data;
		            	var pre = this.user.isTeacher ? 'tea_' : 'stu_';
		            	info.email = info[pre+'email'];
		            	info.name = info[pre+'name'];
		            	info.number = info[pre+'number'];
		            	this.info = info;
		            } else {
		                this.notice = {type: 0, msg: resp.data.message};
		            }
		            this.loading = false;
			    }, function(resp) {
			        // error callback
			        this.loading = false;
			        this.notice = {type: 0, msg: resp.statusText};
			    });
			},
			edit: function(e) {
				console.log(this.$edit)
				e.preventDefault();
				var postData = this.user.isTeacher? 
						{tea_name: this.info.name, sex: this.info.sex} :
						{stu_name: this.info.name, sex: this.info.sex},
					postUrl = this.user.isTeacher?
						'/Teacher/update_info' :
						'/Student/update_info';
				if (!this.$edit.errors) {
					this.$http.post(postUrl, postData).then(function(resp) {
			            if (resp.data.status === 1) {
			            	this.notice = {type: 1, msg: resp.data.message};
			            } else {
			                this.notice = {type: 0, msg: resp.data.message};
			            }
				    }, function(resp) {
				        // error callback
				        this.notice = {type: 0, msg: resp.statusText};
				    })
				} else {
					this.notice = {type: 0, msg: this.$edit.errors[0].message};
				}
			},
			change: function(e) {
				e.preventDefault();
				if (!this.$changePwd.errors) {
					var url = this.user.isTeacher ? '/Teacher/update_pwd' : '/Student/update_pwd';
					this.$http.post(url,
						{old_pwd: this.oldPwd, new_pwd: this.newPwd}).then(function(resp) {
			            if (resp.data.status === 1) {
			            	setTimeout(function() {
			            	    window.location.href = "/Account/login.html";
			            	}, 1000)
			            	this.notice = {type: 1, msg: resp.data.message};
			            } else {
			                this.notice = {type: 0, msg: resp.data.message};
			            }
				    }, function(resp) {
				        // error callback
				        this.notice = {type: 0, msg: resp.statusText};
				    })
				} else {
					this.notice = {type: 0, msg: this.$changePwd.errors[0].message};
				}
			}
		},
		validators: {
            confirm: function(val, target) {
                return val === target;
            }
        }
	}
</script>

<style>
	.panel-body .row{
	    padding: 20px 0px 0px 0px;
	    margin-left: 5px;
	}

	.container {
		margin-top: 40px;
	}

	.radio-row {
		padding-bottom: 8px
	}
</style>